<!-- CFSContainerStorageContent.vue -->
<template>
  <div class="cfs-stuffing-content">
    <div class="table-row">
      <!-- 第一个表格（可滚动） -->
      <div class="table-container main-table">
        <div class="table-scrollable">
          <table>
            <thead>
            <tr>
              <th v-for="header in table1Headers" :key="header">{{ header }}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="i in 20" :key="i">
              <td v-for="header in table1Headers" :key="header">数据 {{ i }}-{{ header }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 第二个表格（Matching Locations） -->
      <div class="table-container matching-locations">
        <div class="table-scrollable">
          <table>
            <thead>
            <tr>
              <th colspan="2">Matching Locations</th>
            </tr>
            <tr>
              <th v-for="header in table2Headers" :key="header">{{ header }}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(row, index) in table2Data" :key="index">
              <td>{{ row.field }}</td>
              <td>{{ row.location }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 第三个表格和附加控件 -->
    <div class="fee-section">
      <div class="fee-table-container">
        <div class="table-scrollable">
          <table>
            <thead>
            <tr>
              <th v-for="header in table3Headers" :key="header">{{ header }}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(row, index) in table3Data" :key="index">
              <td v-for="header in table3Headers" :key="header">{{ row[header] }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="additional-controls">
        <div class="control-item">
          <label for="calculator">计算器:</label>
          <select id="calculator">
            <option value="">选择计算器</option>
            <!-- 添加更多选项 -->
          </select>
        </div>
        <div class="control-item">
          <label for="formula">计算公式:</label>
          <input id="formula" type="text" placeholder="输入计算公式">
        </div>
        <div class="control-item checkbox-item">
          <input type="checkbox" id="agentRate">
          <label for="agentRate">代理费率</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CFSContainerStorageContent',
  data() {
    return {
      table1Headers: [
        '运输方式', '集装箱等级/ULD', '服务等级', '服务提供商', '商品代码', 'Comm. Local',
        '开始日期', '到期日期', '客户合约号', '发布'
      ],
      table2Headers: ['Field', 'Location'],
      table2Data: [
        { field: 'Field 1', location: 'Location 1' },
        { field: 'Field 2', location: 'Location 2' },
        { field: 'Field 3', location: 'Location 3' },
        { field: 'Field 4', location: 'Location 4' },
        { field: 'Field 5', location: 'Location 5' },
        { field: 'Field 6', location: 'Location 6' },
        { field: 'Field 7', location: 'Location 7' },
        { field: 'Field 8', location: 'Location 8' },
      ],
      table3Headers: [
        '费用代码', '说明', '单位', '本地说明', '改写说明', '实际重量/体积', '单位/适数', '条件类型', '表述式',
        '精主类型', '服务类别', '承运人服务费', '商品', '集装', '合同号'
      ],
      table3Data: [
        {
          '费用代码': 'CODE001',
          '说明': 'CFS装箱费示例说明1',
          '单位': 'TEU',
          // ... 其他字段
        },
        {
          '费用代码': 'CODE002',
          '说明': 'CFS装箱费示例说明2',
          '单位': 'FEU',
          // ... 其他字段
        },
        // 添加更多行以展示滚动效果
      ]
    }
  }
}
</script>

<style scoped>
@import '../../styles/sharedStyles.css';
</style>

